<template>
	<view class="personal" style="height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #009EF0;
	background: url('../../../static/image/background1.png') no-repeat center;
	background-size: cover;">
		<view class="title">通讯录信息</view>
		<view class="userimg" style="background: url( '../../../static/image/personal_bg.png') no-repeat center;">
			<image style="width:77px;height:77px;margin-bottom:10px;" :src="userimg" />
			<text style="color:#fff;font-size:18px;">{{ userinfo.userName }}</text>
		</view>
		<view class="userinfo">
			<view class="text">
				<text class="loginuser" style="color:#ccc;font-size:12px;">登录名</text>
				<text class="loginname" style="font-size:14px;color: #fff;">{{userinfo.account}}</text>
			</view>
			<view class="text">
				<text class="username" style="color:#ccc;font-size:12px;">真实姓名</text>
				<text class="username" style="font-size:14px;color: #fff;">{{userinfo.userName}}</text>
			</view>
			<view class="text">
				<text class="role" style="color:#ccc;font-size:12px;">角色</text>
				<text class="role" style="font-size:14px;color: #fff;" v-for="item in userinfo.roleSimpleOutputDTOList" :key="item.roleID">{{item.roleName}}</text>
			</view>
			<view class="text">
				<text class="form" style="color:#ccc;font-size:12px;">组织</text>
				<text class="form" style="font-size:14px;color: #fff;">{{userinfo.workUnitName}}</text>
			</view>
			<view class="text">
				<text class="section" style="color:#ccc;font-size:12px;">部门</text>
				<text class="section" style="font-size:14px;color: #fff;" v-for="item in userinfo.departmentSimpleOutputDTOList" :key="item.departmentID">{{item.departmentName}}</text>
			</view>
			<view class="text">
				<text class="email" style="color:#ccc;font-size:12px;">邮箱</text>
				<text class="email" style="font-size:14px;color: #fff;">{{userinfo.email}}</text>
			</view>
			<view class="text">
				<text class="phone" style="color:#ccc;font-size:12px;">电话</text>
				<text class="phone" style="font-size:14px;color: #fff;">{{userinfo.mobile}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ajax
	} from "../../../api/apis";
	export default {
		data() {
			return {
				userimg: require("../../../static/image/personal_img.png"),
				userinfo: {},
				userID: ""
			};
		},
		methods: {

			onLoad(option) {
				let _this = this
				console.log(option)
				// let userID = option.mailid;
				console.log(option)
				ajax({
					url: "/user/getUserAllInfoByID?userID=" + option.userID,
					method: "POST",
					success: res => {
						_this.userinfo = res.data.data
						console.log(_this.userinfo)
					}
				})
			}
		},
		mounted() {}
	};
</script>

<style scoped>
	uni-page-body {
		height: 100%;
	}

	.personal {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.userimg {
		height:190px;
		margin: 0px 17px 8px;
		border-radius: 20px;
		box-shadow: -5px 10px 12px #e1e1e1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.title {
		font-size: 16px;
		padding: 15px;
		color: #fff;
		text-align: center;
	}

	.userinfo {
		padding: 0 20px;
		flex: 1;
	}

	.text {
		border-bottom: 1px solid #e1e1e1;
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 12px 0;
	}
</style>
